<template>
  <div class="common-layout__collect">
    <div v-for="item in videos">
      <VideoCover1 :video-info="item"></VideoCover1>
      <div>
        <p class="text-hidden__1">{{ item.title }}</p>
        <span
          >收藏于<i>{{ " " + dateConversion(item.createTime) }}</i></span
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, onUnmounted } from "vue";
import { useRoute } from "vue-router";
import { dateConversion } from "@/utils/common";
import collectFolderApi from "@/api/collectFolder";
import { PageReq, PageResp } from "@/types/page";
import { Video } from "@/types/video";
import { AxiosResponse } from "axios";
import { Result } from "@/types/common";
import { User } from "@/types/user";
import VideoCover1 from "@/components/VideoCover1.vue";

const route = useRoute();
const videos = ref(<Video[]>[]);
const page = ref<PageReq>({
  pageIndex: 1,
  pageSize: 20,
});

const getCollVideos = (userId: User["id"]) => {
  collectFolderApi
    .getByUserId(userId, page.value)
    .then((res: AxiosResponse<Result<PageResp<Video>>>) => {
      if (res.data.code === 0) {
        videos.value = res.data.data.records;
      }
    });
};
const watchRoute = watch(
  () => route.params.id,
  (val) => {
    getCollVideos(val + "");
  },
  { immediate: true }
);

onUnmounted(() => {
  watchRoute();
});
</script>

<style lang="scss" scoped>
.common-layout__collect {
  display: grid;
  grid-template-columns: repeat(5, 20%);

  & > div {
    padding: 10px;

    p {
      font-size: 14px;
    }
    span {
      color: grey;
      font-size: 13px;
    }
  }
}
</style>
